<template>
  <view class="myPage">
    <view class="content">
      <view class="avatar-box">
        <button
          class="avatar-box-button u-reset-button"
          open-type="chooseAvatar"
          @chooseavatar="uploadToPhoto"
        >
          <image class="photo" :src="(userInfo.avatar && userInfo.avatar != '') ? (img_url + userInfo.avatar) : `${img_url}/statics/std/static/uploadPhoto.png`"></image>
          <text class="text">更换头像</text>
        </button>
      </view>
      <view class="area">
        <view class="column-item">
          <text class="left">个人信息</text>
          <view class="right" @click="goTo('/page_my/personalDetails/editInformation')">
            <text :class="userInfo.nickName ? 'color' : ''">{{ userInfo.nickName || '去完善' }}</text>
            <image :src="`${img_url}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
      </view>
      <view class="area">
        <view class="column-item">
          <text class="left">实名认证</text>
          <view class="right1" v-if="userInfo && userInfo.idcodeAuth == 0">
            <image :src="`${img_url}/statics/std/static/checked.png`"></image>
            <text>已认证</text>
          </view>
          <view class="right" v-else @click="goTo('/page_my/personalDetails/authentication')">
            <text>未认证</text>
            <image :src="`${img_url}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="column-item">
          <text class="left">手机号码</text>
          <view class="right1" v-if="userInfo && userInfo.phoneAuth == 0">
            <image :src="`${img_url}/statics/std/static/checked.png`"></image>
            <text>已认证</text>
          </view>
          <view class="right" v-else @click="goTo('/page_my/personalDetails/phone')">
            <text>未认证</text>
            <image :src="`${img_url}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="column-item">
          <text class="left">人脸识别</text>
          <view class="right1" v-if="userInfo && userInfo.faceAuth == 0">
            <image :src="`${img_url}/statics/std/static/checked.png`"></image>
            <text>已认证</text>
          </view>
          <view class="right" v-else @click="goTo('/page_my/personalDetails/faceIdentification')">
            <text>未认证</text>
            <image :src="`${img_url}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
      </view>
    </view>
    <view class="my-footer" :style="{bottom: (GET_SAFEAREA_BOTTOM > 0 ? GET_SAFEAREA_BOTTOM : 34) +'px'}" @click="logout">
      <text class="text">退出登录</text>
    </view>
  </view>
</template>

<script>
  const img_url = process.env.VUE_APP_BASEURL_IMG_API;
  const api_url = process.env.VUE_APP_BASEURL_API;
  import {mapGetters} from 'vuex'
  import store, { GET_SAFEAREA_BOTTOM } from '../../store/index.js';
  import requestPost, { login, requestGet } from '@/utils/request.js';
  export default{
    data() {
      return {
        userInfo: null,
        img_url
      }
    },
    computed: {
    	...mapGetters([GET_SAFEAREA_BOTTOM])
    },
    mounted() {
      console.log('安全区距离', this.GET_SAFEAREA_BOTTOM);
    },
    onShow(){
      this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni.getStorageSync('X-UserInfo') : null;
    },
    methods:{
      // 上传头像
      uploadToPhoto(e){
        const that = this;
        uni.showLoading({title: '头像上传中'});
        wx.uploadFile({
          url: api_url + "/file/uploadAttaData",
          filePath: e.detail.avatarUrl,
          header: {
            Authorization: "Bearer " + uni.getStorageSync("X-Token"),
          },
          name: 'file',
          success(result) {
            const data = JSON.parse(result.data);
            if (data.code == 200) {
              const url = data.data.attaPath;
              requestPost('/wxUser/edit', {
                userId: that.userInfo.userId,
                userName: that.userInfo.userName,
                avatar: url,
                }, '/baseplatform').then(res => {
                uni.hideLoading();
                if(res.code === 200){
                  uni.showToast({title: '上传成功！'});
                  login(false);
                  that.$set(that.userInfo, 'avatar', url);
                }else{
                  uni.showToast({title: res.msg || '上传失败！', icon: 'none'});
                }
              })
            } else {
              uni.hideLoading();
              uni.showToast({title: data.msg || '上传失败', icon: 'none'});
            }
          }
        })
      },
      logout(){
        uni.showModal({
          title: "提示",
          content: "确定退出登录吗？",
          showCancel: true,
        	success: function (res) {
        		if (res.confirm) {
              requestGet('/wxUser/wxLogout', {},'/baseplatform').then(res => {
                if(res.code == 200){
                  uni.removeStorageSync("X-Token");
                  uni.removeStorageSync("X-UserInfo");
                  uni.navigateBack()
                }else{
                  uni.showToast({title: res.msg || '退出失败', icon: 'none'});
                }
              })
        		}
            else if (res.cancel) {
        			console.log('用户点击取消');
        		}
        	}
        }); 
      },
      // 页面跳转
      goTo(url){
		  if (url == '/page_my/personalDetails/faceIdentification') {
			  if (this.userInfo && this.userInfo.idcodeAuth == 0) {
				  uni.navigateTo({
				    url
				  })
			  } else {
				  uni.showToast({title: '请先完成实名认证！', icon: 'none'})
			  }
		  } else {
			  uni.navigateTo({
			    url
			  })
		  }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .myPage{
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #F5F7F6;
    .content{
      width: inherit;
      padding: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      .avatar-box {
        margin: 86rpx 0;
        button::after {
          content: '';
          display: none;
        }
        .avatar-box-button {
          position: relative;
          background-color: #F5F7F6;
          width: 200rpx;
          height: 200rpx;
          margin: 0 auto;
          padding: 0;
          border-radius: 100rpx;
        }
        .photo{
          width: 200rpx;
          height: 200rpx;
        }
        .text{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 48rpx;
          line-height: 32rpx;
          background: rgba(0,0,0,0.7);
          font-size: 24rpx;
          font-weight: 400;
          color: #FFFFFF;
        }
      }
      .area{
        width: 100%;
        background-color: #FFFFFF;
        margin-top: 16rpx;
        border-radius: 24rpx;
      }
      .column-item{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 2rpx solid #F3F3F3;
        padding: 32rpx;
        .left{
          width: 150rpx;
          flex: 0 0 auto;
          font-size: 32rpx;
          font-weight: 400;
          color: rgba(0,0,0,0.6);
          line-height: 34rpx;
        }
        .right1{
          height: 56rpx;
          width: 172rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          border-radius: 28rpx;
          background-color: rgba(24, 202, 104, 0.10);
          text{
            font-size: 32rpx;
            font-weight: 400;
            color: #3FAA73;
            line-height: 48rpx;
          }
          image{
            width: 42rpx;
            height: 42rpx;
            margin-right: 10rpx;
          }
        }
        .right{
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          justify-content: flex-end;
          flex: 1 0 auto;
          text{
            font-size: 32rpx;
            font-weight: 400;
            color: rgba(0,0,0,0.3);
            line-height: 48rpx;
          }
          image{
            width: 48rpx;
            height: 48rpx;
            margin-left: 8rpx;
          }
        }
        .color{
          color: rgba(0,0,0,0.8) !important;
        }
      }
    }
    .my-footer {
      position: fixed;
      bottom: 34rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      width: 598rpx;
      height: 84rpx;
      background: #F5F7F6;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      .text {
        font-size: 32rpx;
        font-weight: 400;
        color: #3FAA73;
        line-height: 32rpx;
      }
    }
  }
</style>